<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单浏览 - 甜品店堂食点餐系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f0f2f5;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        .menu-item {
            transition: transform 0.2s;
        }
        .menu-item:active {
            transform: scale(0.98);
        }
        .sold-out {
            opacity: 0.6;
            filter: grayscale(1);
        }
        .category-tabs {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
    <div class="flex flex-col h-full">
        <!-- 顶部导航栏 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between shadow-sm">
            <h1 class="text-lg font-medium">甜蜜时光甜品站</h1>
            <div class="flex items-center">
                <button class="p-2">
                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- 分类标签 -->
        <div class="category-tabs bg-white flex space-x-2 px-4 py-3 whitespace-nowrap">
            <button class="px-4 py-1.5 bg-pink-500 text-white rounded-full text-sm font-medium">全部</button>
            <button class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">招牌甜品</button>
            <button class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">冰淇淋</button>
            <button class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">蛋糕</button>
            <button class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">饮品</button>
            <button class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">新品</button>
        </div>

        <!-- 筛选选项 -->
        <div class="bg-white flex justify-around py-2 border-t border-b border-gray-100 text-sm">
            <button class="flex items-center px-4 py-1 text-gray-600">
                <span>综合排序</span>
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
            <button class="flex items-center px-4 py-1 text-gray-600">
                <span>销量优先</span>
            </button>
            <button class="flex items-center px-4 py-1 text-gray-600">
                <span>价格</span>
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                </svg>
            </button>
        </div>

        <!-- 菜单列表 -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4">
            <!-- 招牌甜品 -->
            <div class="menu-item bg-white rounded-xl shadow-sm overflow-hidden flex">
                <div class="w-1/3">
                    <img src="https://images.unsplash.com/photo-1587314168485-3236d6710814?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="提拉米苏" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between">
                            <h3 class="font-bold text-gray-800">经典提拉米苏</h3>
                            <span class="bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded-full">招牌</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">意大利经典甜点，层次丰富，口感细腻</p>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <div class="text-pink-600 font-bold">¥42.00</div>
                        <button class="bg-pink-500 text-white rounded-full w-7 h-7 flex items-center justify-center shadow-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 芒果冰沙 -->
            <div class="menu-item bg-white rounded-xl shadow-sm overflow-hidden flex">
                <div class="w-1/3">
                    <img src="https://images.unsplash.com/photo-1501443762994-82bd5dace89a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="芒果冰沙" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between">
                            <h3 class="font-bold text-gray-800">芒果冰沙</h3>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full">夏季特饮</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">新鲜芒果打制，清爽解暑</p>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <div>
                            <span class="text-pink-600 font-bold">¥28.00</span>
                            <span class="text-xs text-gray-400 line-through ml-1">¥32.00</span>
                        </div>
                        <button class="bg-pink-500 text-white rounded-full w-7 h-7 flex items-center justify-center shadow-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 草莓奶油蛋糕 -->
            <div class="menu-item bg-white rounded-xl shadow-sm overflow-hidden flex">
                <div class="w-1/3">
                    <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="草莓奶油蛋糕" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between">
                            <h3 class="font-bold text-gray-800">草莓奶油蛋糕</h3>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded-full">新品</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">新鲜草莓搭配轻盈奶油，口感丰富</p>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <div class="text-pink-600 font-bold">¥38.00</div>
                        <button class="bg-pink-500 text-white rounded-full w-7 h-7 flex items-center justify-center shadow-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 巧克力慕斯 (售罄) -->
            <div class="menu-item bg-white rounded-xl shadow-sm overflow-hidden flex sold-out">
                <div class="w-1/3 relative">
                    <img src="https://images.unsplash.com/photo-1511381939415-e44015466834?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="巧克力慕斯" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <span class="text-white font-bold px-2 py-1 rounded-full bg-gray-800 bg-opacity-70 text-sm">已售罄</span>
                    </div>
                </div>
                <div class="w-2/3 p-3 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between">
                            <h3 class="font-bold text-gray-800">巧克力慕斯</h3>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">比利时进口巧克力制作，浓郁丝滑</p>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <div class="text-gray-600 font-bold">¥45.00</div>
                        <button class="bg-gray-300 text-white rounded-full w-7 h-7 flex items-center justify-center" disabled>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 抹茶拿铁 -->
            <div class="menu-item bg-white rounded-xl shadow-sm overflow-hidden flex">
                <div class="w-1/3">
                    <img src="https://images.unsplash.com/photo-1515823662972-da6a2e4d3002?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="抹茶拿铁" class="w-full h-full object-cover">
                </div>
                <div class="w-2/3 p-3 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between">
                            <h3 class="font-bold text-gray-800">抹茶拿铁</h3>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">日本进口抹茶粉，香醇浓郁</p>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <div class="text-pink-600 font-bold">¥32.00</div>
                        <button class="bg-pink-500 text-white rounded-full w-7 h-7 flex items-center justify-center shadow-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 购物车浮动按钮 -->
        <div class="fixed bottom-20 right-4">
            <a href="cart.html" class="bg-pink-500 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg relative">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
            </a>
        </div>

        <!-- 底部导航 -->
        <div class="bg-white border-t border-gray-200 flex justify-around py-2">
            <a href="scan.html" class="flex flex-col items-center p-2">
                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                <span class="text-xs mt-1 text-gray-500">首页</span>
            </a>
            <a href="menu.html" class="flex flex-col items-center p-2">
                <svg class="w-6 h-6 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                </svg>
                <span class="text-xs mt-1 text-pink-500 font-medium">菜单</span>
            </a>
            <a href="cart.html" class="flex flex-col items-center p-2">
                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span class="text-xs mt-1 text-gray-500">购物车</span>
            </a>
            <a href="orders.html" class="flex flex-col items-center p-2">
                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <span class="text-xs mt-1 text-gray-500">我的</span>
            </a>
        </div>
    </div>
</body>
</html>